<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<%
String resid = request.getParameter("resid");
%>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="pragma" content="no-cache" />
		<meta http-equiv="cache-control" content="no-cache" />
		<meta http-equiv="expires" content="0" />
		<%@ include file="../include/taglib.jsp"%>
		<%@ include file="../include/common.jsp"%>
		<%@ include file="../include/jbox.jsp"%>
		<%@ include file="../include/table.jsp"%>
		<title>应用整体可用度分析</title>
		<link href="/bsm/style/default/bsm/tab.css" rel="stylesheet"
			type="text/css">
		<link rel="stylesheet" type="text/css"
			href="${pageContext.request.contextPath}/style/default/bsm/appviewdetail.css" />
		<script type="text/javascript"
			src="${pageContext.request.contextPath}/js/jquery/jcarousellite_1.0.1.js"></script>
		<script type="text/javascript"
			src="${pageContext.request.contextPath}/resources/charts/FusionCharts.js"></script>
		<script type="text/javascript"
			src="${pageContext.request.contextPath}/js/calendar/zh_CN_WdatePicker.js"></script>
		<script type="text/javascript">
          $(document).ready(function() {
              var dataXml='<chart yAxisName="Sales Figure" caption="http1服务器2013-06-17可用状态分析" numberPrefix="" useRoundEdges="1" bgColor="FFFFFF,FFFFFF" showBorder="0">';
                  dataXml+='<set label="北京" value="25000"  />';
                  dataXml+='</chart>';
                  var chart = new FusionCharts("${pageContext.request.contextPath}/resources/charts/Column2D.swf", "ChartId_flash", "560", "400", "0", "1" );
                  chart.setXMLData(dataXml);
                  chart.render("chart1");
             $("#userTypeDimension").click(function(){
                 var dimensionhtml='<div id="divTable">';
                     dimensionhtml+='<form id="form1" method="post" action="">';
        	         dimensionhtml+='<table border="0" class="table_eidt" id="queryScheme">';
                     dimensionhtml+='<tr>';
                     dimensionhtml+='<td  align="left" class="td_left" >';
                     dimensionhtml+='<font style="color:#ff0000; font-weight:bold">*</font>维度类型: ';
                     dimensionhtml+='</td>'
                     dimensionhtml+='<td class="td_right" colspan="3" align="left">'
                     dimensionhtml+='<select style="width:220px;" name="reportStyle" id="reportStyle" onChange="reportStyleChange()">';
                     dimensionhtml+='<option value="one">北京</option>';
                     dimensionhtml+='<option value="two">上海</option>';
                     dimensionhtml+='<option value="three">深圳</option>';
                     dimensionhtml+='</select></td>';
                     dimensionhtml+='</tr>';   
                     dimensionhtml+='<tr>';
                     dimensionhtml+='<td class="td_left">';
                     dimensionhtml+='<font style="color:#ff0000; font-weight:bold">*</font>维度选择: ';
                     dimensionhtml+='</font></td>';
                     dimensionhtml+='<td align="left" class="td_right" style="border-right-width:0px">';
					 dimensionhtml+='<select  multiple name="leftentrySelect" style="width:220px;height:150px" id="leftentrySelect" onDblClick="">';
					 dimensionhtml+='</select></td>';
                     dimensionhtml+='<td width="30" align="left" class="td_right" style="border-right-width:0px;border-left-width:0px"><input type="button" value="添加" id="entryAdd" class="btn-4" onClick="">';
                     dimensionhtml+='<input type="button" value="删除" id="entryRemove" onClick="" class="btn-4"></td>';
                     dimensionhtml+='<td  class="td_right" style="border-left-width:0px">';
					 dimensionhtml+='<select  multiple name="rightentrySelect" style="width:220px;height:150px" id="rightentrySelect" onDblClick="">';
					 dimensionhtml+='</select></td>';
                     dimensionhtml+='</tr>';
                     dimensionhtml+='<tr>';
                     dimensionhtml+='<td colspan="4" height="30" class="td_right" >';
                     dimensionhtml+='<div align="center" style="margin-top:5px;">'
                     dimensionhtml+='<input type="button" value="提交" class="btn-4">';
		    	     dimensionhtml+='<input type="button" value="返回" class="btn-4">';
		    	     dimensionhtml+='</div>';
                     dimensionhtml+='</td></tr>';
                     dimensionhtml+='</table>';
                     dimensionhtml+='</form> </div>';
                     var opt = { title: "用户维度类型选择",width:580,height:243,buttons: {}};
			         $.jBox(dimensionhtml,opt);
             });
             $("#dimension").change(function(){
                 var dataIndex=$('#dimension').val();
                if(dataIndex==1){
                    $('#dayData').hide();
                    $('#houseData').show();
                }else{
                    $('#dayData').show();
                    $('#houseData').hide();
                }
                initDate();
             });
             $("#timeScope").change(function(){
             var countScope = $('#countScope');
             if(this.value==0){
				countScope.show();
				initDate();
			}else{
				countScope.hide();
			}
             });
             function initDate(){
				     var currentDate =new Date();
				  //赋默认值
				  if($('#dimension').val()==1){
					$('#beginDate').val(currentDate.getFullYear()+"-"+add_zero(currentDate.getMonth()+1)+"-"+add_zero(currentDate.getDate())+" 00 时");
		 				$('#endDate').val(currentDate.getFullYear()+"-"+add_zero(currentDate.getMonth()+1)+"-"+add_zero(currentDate.getDate())+" "+add_zero(currentDate.getHours())+" 时");
				   }else{
					$('#beginDate2').val(currentDate.getFullYear()+"-"+add_zero(currentDate.getMonth()+1)+"-"+add_zero(currentDate.getDate()));
		 				$('#endDate2').val(currentDate.getFullYear()+"-"+add_zero(currentDate.getMonth()+1)+"-"+add_zero(currentDate.getDate()));
				}
	          }
             
             function leftToRight_Dimension(leftSelect,rightSelect){
                listTolist(leftSelect, rightSelect, false);
             }
             function leftToRight(leftSelect,rightSelect){
                listTolist(leftSelect, rightSelect, false);
             }
           function listTolist(fromObject, toObject, isAll) {
			if (isAll == true) {
				$("#" + fromObject + " option").each(
							function() {
								$(this).appendTo(
										$("#" + toObject + ":not(:has(option[value="
												+ $(this).val() + "]))"));
							});
				}
				if (isAll == false) {
					$("#" + fromObject + " option:selected").each(
							function() {
								$(this).appendTo(
										$("#" + toObject + ":not(:has(option[value="
												+ $(this).val() + "]))"));
							});
				}
}
           });
</script>
	</head>
	<body>
		<div id="header" class="searchFormStyle" id="searchParameter"
			style="padding: 10px 10px 10px 10px;">
		  <span style="float: left;">
  		    <label >分析类型：</label>
  			<select id="dimension" name="dimension" class="select"  onchange="changedimen();">  
    			<option value="1" >可用状态 </option>
    			<option value="2" >响应时长</option>
    		</select>
    	   </span>
			<span style="float: left;"> <label>
					数据维度：
				</label> <select id="dimension" name="dimension" class="select">
					<option value="1">
						时汇聚数据
					</option>
					<option value="2">
						日汇聚数据
					</option>
				</select> </span>
			<span style="float: left;"> <label>
					时间范围：
				</label> <select id="timeScope" name="timeScope">
					<option value="1">
						近24小时
					</option>
					<option value="7">
						近7天内
					</option>
					<option value="30">
						近一个月
					</option>
					<option value="0">
						自定义
					</option>
				</select> </span>
			<span style="float: left; display: none;" id="countScope"> <label>
					统计范围：
				</label> <span id="houseData"> <input id="beginDate" name="beginDate"
						class="Wdate" type="text"
						onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH 时',maxDate:'%y-%M-%d %H',readOnly:true})" />
					<label>
						-
					</label> <input id="endDate" name="endDate" class="Wdate" type="text"
						onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH 时',maxDate:'%y-%M-%d %H',minDate:$('#beginDate').val(),readOnly:true})" />
			</span> <span id="dayData" style="display: none;"> <input
						id="beginDate2" name="beginDate2" class="Wdate" type="text"
						onclick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-%d',readOnly:true})" />
					<label>
						-
					</label> <input id="endDate2" name="endDate2" class="Wdate" type="text"
						onclick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-%d',minDate:$('#beginDate2').val(),readOnly:true})" />
			</span> </span>
			<span style="float: left;"> <label>
					用户类型维度：
				</label> <input id="userTypeDimension" name="userTypeDimension" type="text"
					style="width: 300px" /> </span>
			<span style="float: left;"> <label>
					功能维度类型：
				</label> <input id="functionTypeDimension" name="functionTypeDimension"
					type="text" style="width: 300px" /> </span>
			<input type="button" onclick="search();" value="查询"
				class="searchFormButtonStyle" />
		</div>
		<div class="column">
			<!--主机-->
			<div class="left2">
				<b class="b1"></b>
				<b class="b2"></b>
				<b class="b3"></b>
				<b class="b4"></b>
				<div class="content">
					<h2>
						分析图示
					</h2>
					<div class="colD">
						<div>
							<div>
								<div id="chart1">
								</div>
							</div>
						</div>
						<br class="clear" />
					</div>
				</div>
			</div>
			<!--@end 主机-->
			<!--数据库-->
			<div class="jkgl" style="margin-top: 5px;>
				<b class="b1"></b>
				<b class="b2"></b>
				<b class="b3"></b>
				<b class="b4"></b>
				<div class="content">
					<h2>
						分析结果
					</h2>
					<div class="colD">
		<div id="healthyData" style="height: 400px">
	 	<table cellpadding="0" cellspacing="0" border="0" class="display" id="healthyHistoryList" width="100%">
				<thead>
					<tr>
						<th width="5%" rowspan="3">时间</th>
						<th width="5" colspan="2">PC端</th>
						<th width="5" colspan="2">手机端</th>
					</tr>
					<tr>
						<th width="5" colspan="2">北京</th>
						<th width="5" colspan="2">上海</th>
					</tr>
					<tr>
						<th width="5">移动</th>
						<th width="5">联通</th>
						<th width="5">移动</th>
						<th width="5">联通</th>
					</tr>
				</thead>
		</table>
	 </div>
						<br class="clear" />
					</div>
				</div>
			</div>
			<!--@end 数据库-->
		</div>
	</body>
</html>